// 导入数据
import{
  getTabsData,
  getTabViewData
}from "../../api/apis.js";

import{
  CacheUtil
} from "../../utils/CacheUtil"

// 定义常量 管理缓存的key
const CACHE_KEY = {
  TABS:"app_tabs_data",
  TAB_VIEW_DATA_PREFIX: "tab_view_data_"
}
// 定义常量 管理缓存的过期时间
const CACHE_EXPIRE = {
  TABS:3600,
  TAB_VIEW_DATA:1800
}

Page({
  // 页面初始数据
  data:{
    active:1, // 标签页默认激活项
    value:"", // 搜索框的值
    tabViewData:[], //当前的标签页页面数据
    isShowShare:true, // 是否显示分享面板
    options:[ // 分享面板配置
      [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
      ],
      [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序', icon: 'weapp-qrcode' },
      ]
    ]
  },

  // 自定义方法 -- 显示分享面板
  showSharePanle(evt){
    this.setData({
      isShowShare:true
    })
  },
  // 自定义方法 -- 选择分享方式
  onSelectShare(evt){
    console.log("当前的分享方式",evt.detail);

    const {
      icon,
      name
    } = evt.detail;

    // 关闭分享面板
    this.setData({
      isShowShare: false
    })

    // 显示当前的分享方式
    wx.showToast({
      title: name,
      icon:"none"
    })
     // 拓展： ai标签换端技术（deep_link）
     // URL Scheme (通用)
     // universal Link (ios)
     // App Link、 chrome intents(Android)
  },

  // 自定义方法 -- 取消分享
  onCloseShare(){
    // 关闭分享面板
    this.setData({
      isShowShare: false
    })
  },


  // 自定义函数 -- 获取tab数据
  getTabs() {
    // 1. 尝试获取缓存
    const CacheTabs = CacheUtil.get(CACHE_KEY.TABS);
    // 如果缓存的值存在
    if (CacheTabs){
      console.log("使用缓存中的 tabs:", CacheTabs);
      // 把缓存中的Tabs发送到视图层
      this.setData({
        tabs: CacheTabs
      })
      // 有缓存就不用请求新数据, return阻断函数向下执行
      return;
    }

    // 2. 如果没有缓存则显示 loading
    wx.showLoading({
      title: '加载中...',
      mask:true
    })
    // 3. 加载标签页数据
    getTabsData()
    .then(res => {  
      // 请求到的数据, 这里用可选链式操作符，链式其中一个值不存在，返回undefined
      let tab_arr = res?.data?.data?.tab;
      // 如果数据结构异常
      if (!tab_arr) {
        console.error("数据结构异常", res);
        return;
      }
      // 去掉数组的第一项(新片场App没有`入场必看`的页面)
      tab_arr.shift()
      // 数据正常，发送到视图层
      this.setData({
        tabs: tab_arr
      })
      console.log("请求到tabs数据:", tab_arr);
      // 把数据存入缓存中
      CacheUtil.set(CACHE_KEY.TABS, tab_arr,CACHE_EXPIRE.TABS);
    })
    // 请求失败执行 .catch 方法
    .catch(err => console.log("请求失败：", err))
    // 请求结束执行 .finally 方法
    .finally(() =>{
      wx.hideLoading();
    })
  },

  // 自定义函数 -- 切换标签页
  toggleTabs(evt){
    // 清楚上一个标签页的页面数组
      this.setData({
        tabViewData:null
      })

    const {
      index, // 当前标签页的下标
      title // 当前标签页的标题
    } = evt.detail

    // 通过下标，获取当前标签页 数据 
    const currentTab = this.data.tabs[index];
    // console.log('当前点击的标签页是:', currentTab);

    // 构建缓存用的动态键名
    const cacheKey = CACHE_KEY.TAB_VIEW_DATA_PREFIX + currentTab.alias;
    // 1. 尝试从缓存中获取数据
    const CacheTabView = CacheUtil.get(cacheKey);
    // 如果缓存存在且有效
    if(CacheTabView){
      console.log(`使用缓存中的${title}数据:`, CacheTabView);
      this.setData({
        tabViewData: CacheTabView
      })
      return;
    }
    
    // 2.如果没有缓存，显示loading
    wx.showLoading({
      title: `加载${title}页数据...`,
      mask:true
    })

    // 3.用当前标签页的link发请求
    getTabViewData(currentTab.link)
      // 成功
      .then(res => {
        const tabViewData = res?.data?.data?.children;
        // 如果数据结构异常
        if(!tabViewData){
          console.error(`${title}页数据结构异常`);
          return;
        }
        // 否则数据结构正常
        console.log(`请求到${title}页数据: `, tabViewData);
        this.setData({
          tabViewData
        })
        // 存入缓存中
        CacheUtil.set(cacheKey,tabViewData,CACHE_EXPIRE.TAB_VIEW_DATA);
      })
      // 失败
      .catch(e=> console.error("请求失败：", e))
      // 结束
      .finally(()=>{
        // 关闭loading
        wx.hideLoading();
      })
    
  },

  /**
   * 生命周期函数 -- 监听页面加载 
   */
  onLoad: function (options) {
    this.getTabs(); //自定义函数
  }
})